<template>
	<view>
		<!-- 聊天列表 -->
		<scroll-view scroll-y="true" style="position: absolute;left: 0;top: 0;right: 0;bottom: 100rpx;" :scroll-into-view="scrollInto"
		 :scroll-with-animation="true">
			<block v-for="(item,index) in list" :key="index">
				<view :id="'chat'+index">
					<user-chat-list :item="item" :index="index" :pretime="index > 0 ? list[index-1].create_time : 0"></user-chat-list>
				</view>
			</block>
		</scroll-view>
		<!-- 底部操作条 -->
		<bottom-input @submit="submit"></bottom-input>
		<!-- <view class="fixed-bottom flex align-center border-top bg-white" style="height: 100rpx;">
			<input type="text" value="" v-model="content" class="flex-1 rounded bg-light font-md p-2 ml-2" placeholder="文明发言"
			 @confirm="submit" />
			<view class="iconfont icon-fabu flex align-center justify-center font-lg animated" style="width: 100rpx;"
			 hover-class="text-main jello" @click="submit"></view>
		</view> -->
	</view>
</template>

<script>
	import userChatList from '@/components/user-chat/user-chat-list.vue';
	import bottomInput from '@/components/common/bottom-input.vue';
	export default {
		components: {
			userChatList,
			bottomInput
		},
		data() {
			return {
				// 滚动位置
				scrollInto: '',
				list: [{
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '你好啊',
					create_time: 1613959692
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '你好',
					create_time: 1613961916
				}, {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '在干嘛',
					create_time: 1613962198
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '上班',
					create_time: 1613962198
				}, {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '你好啊',
					create_time: 1613959692
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '你好',
					create_time: 1613961916
				}, {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '在干嘛',
					create_time: 1613962198
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '上班',
					create_time: 1613962198
				}, {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '你好啊',
					create_time: 1613959692
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '你好',
					create_time: 1613961916
				}, {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: '在干嘛',
					create_time: 1613962198
				}, {
					user_id: 2,
					avatar: '/static/demo/userpic/9.jpg',
					username: '昵称',
					data: '上班',
					create_time: 1613962198
				}]
			}
		},
		// 页面加载完成的时候
		onReady() {
			this.pageToBottom()
		},
		methods: {
			submit(data) {
				let obj = {
					user_id: 1,
					avatar: '/static/demo/userpic/11.jpg',
					username: '昵称',
					data: data,
					create_time: (new Date()).getTime()
				}
				this.list.push(obj)
				// 滚动到底部
				this.pageToBottom()
			},
			// 滚动到底部
			pageToBottom() {
				// 最后一个消息气泡
				let lastIndex = this.list.length - 1
				if (lastIndex < 0) return
				this.scrollInto = 'chat' + lastIndex
			}
		}
	}
</script>

<style>

</style>
